<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-09-13 11:33:52
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-11-08 16:56:13
 * @Description:
 *
-->

<template>
  <el-row class="cloud-cluster-container" type="flex" align="middle">
    <span v-if="cloudVendorTitle" class="name">{{ cloudVendorTitle }}</span>
    <el-select
      v-model="cloudVendorInner"
      placeholder="请选择集群服务商"
      size="medium"
      style="width: 200px; margin-right: 20px"
      @change="cloudVendorChange"
    >
      <el-option
        v-for="item in cloudVendors"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span v-if="k8sClusterNameTitle" class="name">{{
      k8sClusterNameTitle
    }}</span>
    <el-select
      v-model="k8sClusterNameInner"
      placeholder="请选择集群"
      size="medium"
      style="width: 200px; margin-right: 20px"
      :loading="clusterLoading"
      @change="clusterChange"
    >
      <el-option
        v-for="item in clusters"
        :key="item.k8sClusterName"
        :label="item.k8sClusterName"
        :value="item.k8sClusterName"
      />
    </el-select>
  </el-row>
</template>

<script>
import { getK8sClusterInfos } from '@/api/cnap/hybrid-cloud'
import cloudVendorHandle from '@/views/mixin/cloudVendorHandle.js'

export default {
  name: 'CloudCluster',
  components: {},
  mixins: [cloudVendorHandle],
  props: {
    cloudClusterObj: {
      // 服务商
      type: Object,
      default: function() {
        return {
          cloudVendor: '', // 云服务商
          accountName: '', // 云账户
          clusterName: '' // 集群名称
        }
      }
    },
    cloudVendorTitle: {
      // 标题
      type: String,
      default: '集群服务商'
    },
    k8sClusterNameTitle: {
      // 标题
      type: String,
      default: '集群名称'
    }
  },
  data() {
    return {
      clusters: [], // 集群列表
      clusterLoading: false, // 集群加载中
      cloudVendorInner: '', // 云商inner
      k8sClusterNameInner: '' // 集群inner
    }
  },
  computed: {
    /**
     * @description: 云商参数
     * @return {*}
     */
    cloudVendorValue() {
      return this.cloudVendorInner
    },
    /**
     * @description: 参数
     * @return {*}
     */
    cloudClusterObjParams() {
      return {
        ...this.cloudVendorParams,
        clusterName: this.k8sClusterNameInner
      }
    }
  },
  watch: {
    /**
     * @description: 监听云商
     * @return {*}
     */
    cloudClusterObj: {
      handler(newVal) {
        this.cloudVendorInner = this.formatVendorAccount(
          newVal.cloudVendor,
          newVal.accountName
        )
        this.k8sClusterNameInner = newVal.clusterName
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    if (this.cloudClusterObj.cloudVendor) {
      // 获取集群
      this.getK8sClusterInfos()
    }
  },
  methods: {
    /**
     * @description: 处理集群选中情况
     * @return {*}
     */
    handleClusterSelect() {
      if (this.k8sClusterNameInner) {
        // 查找集群
        const idx = this.clusters.findIndex((element) => {
          return element.k8sClusterName === this.k8sClusterNameInner // 判断集群名称
        })
        if (idx < 0) {
          // 当前集群不在集群信息列表中 集群名称置为空
          this.k8sClusterNameInner = ''
          this.$emit('update:cloudClusterObj', this.cloudClusterObjParams) // 更新
        }
      } else {
        if (this.clusters.length > 0) {
          this.k8sClusterNameInner = this.clusters[0].k8sClusterName
          this.$emit('update:cloudClusterObj', this.cloudClusterObjParams) // 更新
        }
      }
    },
    /**
     * @description: 获取集群信息列表
     * @return {*}
     */
    getK8sClusterInfos() {
      this.clusterLoading = true
      // 获取集群信息
      getK8sClusterInfos({
        ...this.cloudVendorParams,
        pageNo: 1,
        pageSize: 100
      })
        .then((res) => {
          this.clusterLoading = false
          this.clusters = Array.isArray(res.data.result) ? res.data.result : []
          this.handleClusterSelect()
        })
        .catch((err) => {
          // 异常处理
          console.log(err)
          this.clusterLoading = false
          this.clusters = []
          this.handleClusterSelect()
        })
    },
    /**
     * @description: 集群切换
     * @param {*} val
     * @return {*}
     */
    clusterChange(val) {
      this.$emit('update:cloudClusterObj', this.cloudClusterObjParams) // 更新
      this.$emit('clusterChange') // 抛出事件
    },
    /**
     * @description: 云服务商切换
     * @param {*} val
     * @return {*}
     */
    cloudVendorChange(val) {
      this.k8sClusterNameInner = '' // 清空集群名称
      this.$emit('update:cloudClusterObj', this.cloudClusterObjParams) // 更新
      this.getK8sClusterInfos() // 获取集群信息列表
      this.$emit('cloudVendorChange') // 抛出事件
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.cloud-cluster-container {
  .name {
    .textStyle(14px , 400, #4a4a4a);
    line-height: 20px;
    margin-right: 10px;
  }
}
</style>
